<!DOCTYPE html>
<html lang="en" class="home" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"     
      xmlns:p="http://primefaces.org/ui">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
        <title>FreeSystem</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
        <meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
        <meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
        <meta name="author" content="Codrops"/>
                <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
                <script type="text/javascript">
                  var _gaq = _gaq || [];
                  _gaq.push(['_setAccount', 'UA-7243260-2']);
                  _gaq.push(['_trackPageview']);
                  (function() {
                    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                  })();
                </script>
    </head>
    <h:head>
    </h:head>
    <body>        
    <h:body>
    <h:outputStylesheet library="css" name="demo.css"/>
    <h:outputStylesheet library="css" name="styleregistro.css"/>
    <h:outputStylesheet library="css" name="custom.css"/>
    <h:outputStylesheet library="css" name="styleNoJS.css"/>
    <h:outputStylesheet library="css" name="components.css"/>
        <div class="container demo-2">          
                        <!-- Codrops top bar -->
            <div class="codrops-top clearfix">
                <a>
                    <strong>FreeSystem </strong>Liberte-se Software 100% Gratuito
                </a>
                <span class="right">
                    <a>
                        <p>Login: <h:inputText/></p>
                        Senha: <h:inputSecret />
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
            <header class="clearfix">                   
                                <h1>FreeSystem <span>100% Gratuito</span></h1>                          
                                <nav class="codrops-demos">
                                <h3>Dados da Empresa</h3>
                                </nav>                          
                        </header>
            <div id="slider" class="sl-slider-wrapper">
                                <div class="sl-slider">                         
                                        <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                                                <div class="sl-slide-inner">
                                                        <div class="bg-img bg-img-1"></div>                                                      
                                                        
        <blockquote>
        <h1>Dados Pessoais</h1>
        <h:form>
     <div style="margin-top:15px; margin-left:10px; margin-bottom: 15px;">
      <p><h:outputText value="Nome Empresa:*"/></p>  
      <p:inputText id="nomeempresa" label="NOME EMPRESA" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.nmfantasia}" style="width:400px" required="true"/>
     </div>
     <div style="margin-left:10px;"> 
      <p><h:outputText value="Razão Social:*" /></p>  
      <p:inputText id="razaosocial" label="RAZAO SOCIAL" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.nmrazaosocial}" style="width:400px" required="true"/>
     </div>
     
     <div style="float: left; width:48%; margin-left:10px;">          
      <p><h:outputText value="CNPJ:*" /></p>
      <p:inputMask mask="99.999.999/9999-99" id="cnpj" label="CNPJ" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.numcnpj}" required="true"/>

      <p><h:outputText value="Insc. Estadual:*" /></p>  
      <p:inputMask mask="999.999.99-99" id="ie" label="IE" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.numinscestadual}" required="true"/>
      
      <p><h:outputText value="Fone:" /></p>  
      <p:inputMask mask="(99)9999-9999" id="fone" label="FONE" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.nufone01}" required="true"/>
      
      <p><h:outputText value="E-mail Contato:" /></p>  
      <p:inputText 
      	id="email" 
      	label="EMAIL" 
      	styleClass="inputtext" 
      	value="#{usuarioempresausuariobean.usuarioempresa.emailcontato}" 
      	required="true">
      	<f:validateRegex pattern="[a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9\-\_\.]+"/>
      	</p:inputText>
     </div>
     
     <div style="float: left; width:50%; margin-bottom: 15px">
      <p><h:outputText value="Nome Usuario*" /></p>
      <p:inputText id="nomeusuario" label="NOME USUARIO" styleClass="inputtext" value="#{usuarioempresausuariobean.usuario.nmusuario}" required="true"/>
      
      <p><h:outputText value="E-mail:*"/></p>
      <p:inputText 
      	id="emailusuario" 
      	label= "EMAILUSUARIO" 
      	styleClass="inputtext" 
      	value="#{usuarioempresausuariobean.usuario.emailusuario}" 
      	required="true">
      	<f:validateRegex pattern="[a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9\-\_\.]+"/>
      </p:inputText>
      
      <p><h:outputText value="Senha:*" /></p>  
      <p:password id="senha" label="SENHA" styleClass="inputtext" value="#{usuarioempresausuariobean.usuario.senhausuario}" required="true" />
      
      <p><h:outputText value="Re-Senha:*" /></p>  
      <p:password id="resenha" label="RE-SENHA" styleClass="inputtext" value="#{usuarioempresausuariobean.resenha}" required="true"/>      
     </div>
     
     <h1>Endereço</h1>

     <div style="float:left; width:48%; margin-top:15px; margin-left:10px;">      
      <p><h:outputText value="Rua/Av.:*" /></p>  
      <p:inputText id="endereco" label="ENDERECO" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.dsendereco}" required="true"/>
      
      <p><h:outputText value="Numero:*" /></p>  
      <p:inputText id="numerocasa" label="NUMEROCASA" styleClass="inputtext" required="true"/>      
      
      <p><h:outputText value="Bairro:*" /></p>  
      <p:inputText id="bairro" label="BAIRRO" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.dsbairro}" required="true"/>            
     </div>
     
     <div style="float: left; margin-top:15px; width:50%;">
      <p><h:outputText value="Cidade:*" /></p>  
      <p:inputText id="cidade" label="CIDADE" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.dscidade}" required="true"/>
      
      <p><h:outputText value="Estado/UF " /></p>  
      <p:selectOneMenu value="#{ufbean.suf}" >
       <f:selectItem itemLabel="Selecione UF" itemValue="" /> 
       <f:selectItems value="#{ufbean.uflists}" />
      </p:selectOneMenu>
      <p><h:outputText value="CEP:*" /></p>  
      <p><p:inputText id="cep" label="CEP" styleClass="inputtext" value="#{usuarioempresausuariobean.usuarioempresa.nucep}" required="true"/></p>
     </div>
     <h:commandButton action="#{usuarioempresausuariobean.inserirusuarioempresausuario()}" value="Salvar" />
    </h:form>
    </blockquote>
    </div>
   </div>                                  
   <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
       <div class="sl-slide-inner">
        <div class="bg-img bg-img-2"></div>
                <blockquote>
     <h1>Ramo de Atividade</h1>
     <h:form>
     <div style="margin-top:15px; margin-left:10px;"> 
      <h1>Seu Negócio:</h1> 
      <cite> 
      <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">  
  
        <h:outputText value="Grid: " />  
        <p:selectOneRadio id="grid" value="#{ramoatividadebean.listRamoAtividadeAtivo}" layout="grid" columns="3">  
            <f:selectItems value="#{formBean.movies}"/>  
        </p:selectOneRadio>  
  
      </h:panelGrid> 
      </cite>
     </div>     
    </h:form>
    </blockquote>
        </div>
   </div>                                  
                                        <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                                                <div class="sl-slide-inner">
                                                        <div class="bg-img bg-img-3"></div>
                                                        <h2>Dum spiro, spero.</h2>
                                                        <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
                                                </div>
                                        </div>                                  
                                </div>
                                <!-- /sl-slider -->
                                <nav id="nav-dots" class="nav-dots">
                                        <span class="nav-dot-current"></span>
                                        <span></span>
                                        <span></span>
                                </nav>
                        </div>
                        <!-- /slider-wrapper -->
        </div>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
                <script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
                <script type="text/javascript" src="js/jquery.slitslider.js"></script>
                <script type="text/javascript"> 
                        $(function() {                  
                                var Page = (function() {
                                        var $nav = $( '#nav-dots > span' ),
                                                slitslider = $( '#slider' ).slitslider( {
                                                        onBeforeChange : function( slide, pos ) {
                                                                $nav.removeClass( 'nav-dot-current' );
                                                                $nav.eq( pos ).addClass( 'nav-dot-current' );
                                                        }
                                                } ),
                                                init = function() {
                                                        initEvents();                                                   
                                                },
                                                initEvents = function() {
                                                        $nav.each( function( i ) {                                                      
                                                                $( this ).on( 'click', function( event ) {                                                                      
                                                                        var $dot = $( this );                                                                   
                                                                        if( !slitslider.isActive() ) {
                                                                                $nav.removeClass( 'nav-dot-current' );
                                                                                $dot.addClass( 'nav-dot-current' );                                                             
                                                                        }                                                                       
                                                                        slitslider.jump( i + 1 );
                                                                        return false;                                                           
                                                                } );                                                            
                                                        } );
                                                };
                                                return { init : init };
                                })();
                                Page.init();
                                /**
                                 * Notes: 
                                 * 
                                 * example how to add items:
                                 */
                                /*                              
                                var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
                                
                                // call the plugin's add method
                                ss.add($items);
                                */                      
                        });
                </script>
        </h:body>
        </body>
</html>